<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>社区举报</title>
    <link rel="stylesheet" type="text/css" href="../css/public-style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/cancel.css"/>
    <style>
        body, html {
            overflow: auto;
        }

        .title {
            border-bottom: 1px #dbdbdb solid;
            padding-bottom: 0.4rem;
            position: relative;
        }
    </style>
</head>
<body>
<!-- 内容 -->
<div id="main">
    <!-- 头部 -->
    <header>
        <img src="../image/return.png" id="fanHui"/>
        <span id="tilte">举报</span>
    </header>

    <div class="warning">
        <img src="../image/!.png"/>

        <p>温馨提示：请开启GPS定位功能，上传地理位置信息，以 便精确定位处理问题。</p>
    </div>

    <div class="content">
        <div class="reason bg">
            <div class="title">案件图片</div>
            <div class="upImg"><img src="../image/ceshi.png"/></div>
            <div class="upload"></div>
        </div>
    </div>

    <div class="content">
        <div class="reason bg">
            <div class="title">位置描述</div>
            <textarea placeholder="请填写位置"></textarea>
        </div>
    </div>

    <div class="content">
        <div class="reason bg">
            <div class="title">联系电话</div>
            <div class="phone">+86 <input type="text"/></div>
        </div>
    </div>

    <div class="content">
        <div class="reason bg">
            <div class="title">
                自行处理案件
                <ul>
                    <li><a href="#">OFF</a></li>
                    <li class="on"><a href="#">ON</a></li>
                </ul>
            </div>
            <p class="cl">上报原因</p>
            <textarea placeholder="请填写上报原因"></textarea>
        </div>
    </div>

    <div class="bg-blue" style="margin-bottom:0.8rem;">
        提交
    </div>

    <input type="file" name="_file" accept='image/*' id="up_file"/>
</div>
</body>
<script src="../js/remJs.js"></script>
<script src="../js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('.upload').click(function () {
            $('#up_file').trigger('click');
        })

        $('#up_file').change(function () {
            var up_file = $(this);
            var filepath = up_file.val();
            alert(filepath)
        })


        $("ul li").click(function () {
            $("ul li").removeClass("on");
            $(this).addClass("on");

            //0代表off 1代表on
            alert($(this).index())
        });
    });

</script>
</html>